<template>
	<div class="war">
	<div class="area-center">
		<head-page @back="back" :title="$route.query.title" id="back"></head-page>
		<div>
			<div class="title-center title">
				{{ $route.query.index }}、{{ info.videoTitle }}
			</div>
			<video
				class="video"
				id="my-video"
				x5-video-orientation="landscape"
				preload="auto"
				:src="imgurl + info.videoUrl"
				controls
			></video>
		</div>
	</div>
	</div>
</template>
<script>
import { getLecture } from "@/api/index"
export default {
	components: {},
	props: {},
	data() {
		return {
			info: ''
		}
	},
	mounted() {
		getLecture({
			videoId: this.$route.query.id
		}).then(res => {
			if (res.data.code == 200) {
				this.info = res.data.data
			}
		})
	},
	methods: {
		back() {
			document.getElementById('my-video').pause()
		}
	},
}
</script>
<style scoped>
.wrapper {
}
.title {
	padding: 0.1rem;
}
.video {
	width: 100%;
	height: 2rem;
}
</style>